<template>
  <div>
    <!-- 头部 -->
    <header class="header">
      南宁政务一体化大屏
    </header>
    <!-- /头部 -->

    <!-- 体部 -->
    <div class="content">
      <div class="top">
        <div class="left">
          <div class="charts"><Left1></Left1></div>
          <div class="charts"><Left2></Left2></div>
        </div>
        <div class="center"><Map></Map></div>
        <div class="right">
          <div class="charts"><Right1></Right1></div>
          <div class="charts"><Right2></Right2></div>
        </div>
      </div>
      <div class="bottom">
        <div class="charts"><Bottom1></Bottom1></div>
        <div class="charts"><Bottom2></Bottom2></div>
        <div class="charts"><Bottom3></Bottom3></div>
        <div class="charts"><Bottom4></Bottom4></div>
      </div>
    </div>
    <!-- /体部 -->
    
  </div>  
</template>

<script>
import Left1 from '../government/components/Left1.vue';
import Left2 from '../government/components/Left2.vue';
import Right1 from '../government/components/Right1.vue';
import Right2 from '../government/components/Right2.vue';
import Map from '../government/components/Map.vue';
import Bottom1 from '../government/components/Bottom1.vue'
import Bottom2 from '../government/components/Bottom2.vue'
import Bottom3 from '../government/components/Bottom3.vue'
import Bottom4 from '../government/components/Bottom4.vue'
export default {
  components:{
    Left1,
    Left2,
    Right1,
    Right2,
    Map,
    Bottom1,
    Bottom2,
    Bottom3,
    Bottom4,
  },
  data(){
    return {

    }
  },
  methods: {
    
  },
  created(){

  },
}
</script>

<style lang="scss">
  // 头部样式
  // 南宁政务一体化大屏
  .header{
    height: 60px;
    background-image: url('../../assets/layout/header.png');
    background-size: 100% 200px;
    color: white;
    font-size: 28px;
    text-align: center;
  }

  // 体部样式
  .content{
    height: calc(100vh - 60px);
    display: flex;
    flex-direction: column;
    .charts{
      background-image: url('../../assets/layout/chart_box_bg.png');
      background-size: 100% 100%;
      margin: 0 .5em .5em .5em;
    }
    .top{
      flex: 2;
      // background-color: blue;
      display: flex;
      .left, .right{
        flex: 1;
        // background-color: yellow;
        display: flex;
        flex-direction: column;
        div{
          flex: 1;
        }
      }
      .center{
        flex: 2;
        // background-color: orange;
        background-image: url('../../assets/layout/chart_center_box_bg.png');
        background-size: 100% 100%;
        margin-bottom: .5em;
      }
    }
    .bottom{
      flex: 1;
      // background-color: red;
      display: flex;
      div{
        flex: 1;
      }
    }
  }

</style>